@import "./color";

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
    content: "";
    position: absolute;
    background-color: @color;
    display: block;
    z-index: 1;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

.hairline(@direction, @color: @borderColor) when (@direction ="top") {
    border-top: 1px solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-top: none;

            &::before {
                .scale-hairline-common(@color, 0, auto, auto, 0);
                width: 100%;
                height: 1px;
                transform-origin: 50% 50%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleY(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @borderColor) when (@direction ="right") {
    border-right: 1px solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-right: none;

            &::after {
                .scale-hairline-common(@color, 0, 0, auto, auto);
                width: 1px;
                height: 100%;
                background: @color;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleX(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @borderColor) when (@direction ="bottom") {
    border-bottom: 1px solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-bottom: none;

            &::after {
                .scale-hairline-common(@color, auto, auto, 0, 0);
                width: 100%;
                height: 1px;
                transform-origin: 50% 100%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleY(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @borderColor) when (@direction ="left") {
    border-left: 1px solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-left: none;

            &::before {
                .scale-hairline-common(@color, 0, auto, auto, 0);
                width: 1px;
                height: 100%;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleX(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @borderColor, @radius: 0) when (@direction ="all") {
    border: 1px solid @color;
    border-radius: @radius;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            position: relative;
            border: none;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                border: 1px solid @color;
                border-radius: @radius * 2;
                transform-origin: 0 0;
                transform: scale(0.5);
                box-sizing: border-box;
                pointer-events: none;

                // @media (min-resolution: 3dppx) {
                //   width: 300%;
                //   height: 300%;
                //   border-radius: @radius * 3;
                //   transform: scale(0.33);
                // }
            }
        }
    }
}

.hairline-remove(@position) when (@position ="left") {
    border-left: 0;

    &:before {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ="right") {
    border-right: 0;

    &:after {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ="top") {
    border-top: 0;

    &:before {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ="bottom") {
    border-bottom: 0;

    &:after {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ="all") {
    border: 0;

    &:before {
        display: none !important;
    }
}